<template>
  <div class="servPrivSession">
    <!-- <h1>隐私协议</h1> -->
    <div class="richtxt">
      <div class="top">
        <header class="flex-between">
          <div class="title">隐私协议</div>
          <div class="operation flex-start">
            <div v-if="isEdit" class="cancel cp" @click="cancelEdit">取消</div>
            <div v-if="!isEdit" class="edit cp" @click="editSession">修改</div>
            <div v-else class="save cp" @click="saveSession">保存</div>
          </div>
        </header>
      </div>

      <div id="editor"></div>
      <div ref="txtcontent" id="txtcontent" v-if="!isEdit">
        <!-- {{currentHtml}} -->
      </div>
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  data () {
    return {
      isEdit: false,
      // currentHtml: '',
      editor: null
    }
  },
  created () {
    this.$store.dispatch('serviceSetting/getPrivacyAgreementData').then(res => {
      // // console.log(res.message)
      this.$refs.txtcontent.innerHTML = this.currentHtml
    }).catch(res => {
      this.$message({
        type: 'error',
        message: res,
        duration: 1000
      })
    })
  },
  computed: {
    currentHtml () {
      return this.$store.state.serviceSetting.privacyAgreement
    }
  },
  mounted () {},
  methods: {
    createEditor () {
      this.editor = new E('#editor')
      this.editor.config.excludeMenus = ['emoticon', 'image', 'video', 'table']
      this.editor.config.height = 750
      this.editor.config.fontNames = [
        '黑体',
        '仿宋',
        '楷体',
        '标楷体',
        '华文仿宋',
        '华文楷体',
        '宋体',
        '微软雅黑',
        'Arial',
        'Tahoma',
        'Verdana',
        'Times New Roman',
        'Courier New'
      ]
      this.editor.create()
    },
    editSession () {
      this.isEdit = true
      this.createEditor()
      // this.currentHtml = this.$refs.txtcontent.innerHTML
      this.editor.txt.html(this.currentHtml)
    },
    cancelEdit () {
      this.isEdit = false
      this.$nextTick(() => {
        this.$refs.txtcontent.innerHTML = this.currentHtml
        this.editor.destroy()
        this.editor = null
      })
    },
    saveSession () {
      this.$store.dispatch('serviceSetting/updatePrivacyAgreementData', { privacyAgreementHtml: this.editor.txt.html() }).then(res => {
        // console.log(res)
        this.$message({
          type: 'success',
          message: res.message,
          duration: 1000
        })
        this.$store.dispatch('serviceSetting/getPrivacyAgreementData').then(res => {
          this.$refs.txtcontent.innerHTML = this.currentHtml
        })
      }).catch(res => {
        this.$message({
          type: 'error',
          message: '操作失败',
          duration: 1000
        })
      })
      this.cancelEdit()
    }
  }
}
</script>

<style lang="scss" scoped>
.servPrivSession {
  h3 {
    font-size: 14px;
    font-weight: 400;
    color: #3d4966;
    line-height: 14px;
    padding-bottom: 24px;
  }
  .richtxt {
    // height: calc(100% - 38px);
    min-height:934px ;
    overflow: auto;
    background-color: #fff;
    border-radius: 8px;
    // margin-top: 20px;
    padding: 0 24px;
    .top {

    }
    header {
      padding: 36px 24px 20px;
      padding-left: 0;
      border-bottom: 1px solid #e6e9f0;
      .title {
        height: 24px;
        font-size: 16px;
        font-weight: 500;
        color: #1b1f35;
        line-height: 24px;
      }
      .operation {
        .cancel {
          height: 24px;
          font-size: 16px;
          color: #a5aebf;
          line-height: 24px;
        }
        .edit,
        .save {
          margin-left: 24px;
          height: 24px;
          opacity: 1;
          font-size: 16px;
          color: #304eec;
          line-height: 24px;
        }
      }
    }
    #editor {
      margin-top: 23px;
    }
    #txtcontent {
      margin-top: 33px;
      padding-left: 26px;

    }
  }
}
</style>
